<template>
  <div class="slide">
    <el-menu
      :default-active="activePath"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#4065E0"
      text-color="#fff"
      active-text-color="#00E6C1"
      unique-opened
      router
    >
      <div class="home-logo">
        <img src="./nng-logo.png" alt />
      </div>

      <el-menu-item index="/home" class="home-page">
        <img class="home-icon" src="./home.png" alt srcset />
        <span slot="title">{{ $t('route.dashboard') }}</span>
      </el-menu-item>

      <!-- 内容运营部分 -->
      <el-submenu index="content">
          <template slot="title">
            <img class="home-icon" src="./sucai.png" alt srcset />
            <span>内容运营</span>
            <!-- <i class="el-icon-caret-right el-icon-caret-bottom"></i> -->
          </template>
          <el-menu-item index="/home/start-page">启动页</el-menu-item>
          <el-menu-item index="/home/material/background">素材库</el-menu-item>
      </el-submenu>

      <el-submenu index="date">
          <template slot="title">
            <img class="home-icon" src="./shuju.png" alt srcset />
            <span slot="title">数据中心</span>
          </template>
          <el-menu-item index="/home/music">音乐搜索记录</el-menu-item>
          <el-menu-item index="/home/weather">天气搜索记录</el-menu-item>
          <el-menu-item index="/home/POIsearch">POI搜索</el-menu-item>
          <el-menu-item index="/home/DMSrecord">DMS危险驾驶行为</el-menu-item>
      </el-submenu>

      <!-- 用户管理 -->
      <el-menu-item index="/home/administration" class="home-page">
        <img style="width: 16px; height: 16px" class="home-icon" src="./usermanger.png" alt srcset />
        <span slot="title">用户管理</span>
      </el-menu-item>

      <!-- disabled为禁止点击 可以做权限访问 -->
      <el-submenu index="personal">
          <template slot="title">
            <img class="home-icon" src="./usercenter.png" alt srcset />
            <span slot="title">个人中心</span>
          </template>
          <el-menu-item index="/home/my-device">我的设备</el-menu-item>
          <el-menu-item index="/home/life">生活</el-menu-item>
          <el-menu-item index="/home/setting">个性化设置</el-menu-item>
      </el-submenu>

      <el-submenu index="account">
          <template slot="title">
            <img class="home-icon" src="./accound.png" alt srcset />
            <span slot="title">账号管理</span>
          </template>
          <el-menu-item index="/home/personal-account">个人账号</el-menu-item>
          <el-menu-item index="/home/business-account">企业账号</el-menu-item>
      </el-submenu>
      <!-- 如果是个人用户登录，则隐藏内容运营，数据中心，用户管理 -->
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: "SlideBar",
  data() {
    return {
      isCollapse: true,
      activePath: this.$route.path,
      // isShow: true
    };
  },
  computed: {
    ...mapGetters([
      'roleInfo'
    ])
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  mounted() {
    console.log(this.$route.path);
  },
  created(){
    // if(this.roleInfo.groupName != ''){
    //   this.isShow = true
    // }else{
    //   this.isShow = false
    // }
  }
};
</script>

<style lang="scss" scoped>
.slide {
  height: 100%;
  .el-menu {
    border-right: 0;
    height: 100%;
    .home-logo {
      width: 100%;
      height: 50px;
      margin: 0 auto;
      margin-top: 20px;
      margin-bottom: 45px;
      img {
        height: 100%;
        vertical-align: middle;
      }
    }
    .home-icon {
      width: 14px;
      height: 14px;
      padding-right: 6px;
    }
  }
}
</style>
